<!--
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24 
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24 
 !-->
<template>
  <div id="layout" ref="container" class="layout" />
</template>

<script>
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      list: [
        {
          type: 'widget-text',
          value: {
            data: {},
            position: {
              height: 200,
              left: 0,
              top: 0,
              width: 200,
              zIndex: 0,
            },
            setup: {
              background: '#12EF80',
              color: '#F70F58',
              fontSize: 30,
              fontWeight: 'bold',
              text: '文本文档',
              textAlign: 'left',
            },
          },
        },
        {
          type: 'widget-marquee',
          value: {
            data: {},
            position: {
              height: 200,
              left: 200,
              top: 0,
              width: 200,
              zIndex: 0,
            },
            setup: {
              background: 'yellow',
              color: '#F70F58',
              fontSize: 30,
              fontWeight: 'bold',
              text: '滚动文本',
              textAlign: 'left',
              marqueeSet: true,
              marqueeQuit: 10,
            },
          },
        },
        {
          type: 'widget-href',
          value: {
            data: {},
            position: {
              height: 200,
              left: 400,
              top: 0,
              width: 200,
              zIndex: 0,
            },
            setup: {
              background: 'yellow',
              color: '#F70F58',
              fontSize: 30,
              fontWeight: 'bold',
              text: '超链接',
              textAlign: 'left',
            },
          },
        },
      ],
    }
  },
  mounted() {
    this.analysisJsonFn()
  },
  methods: {
    /**
     * 解析后台数据生成DOM节点
     * 数据类型
     * type = widget-text, widget-marquee, widget-href, widget-time, widget-image, widget-slider
     * widget-video, widget-table, widget-universal,widget-barchart,widget-linechart,widget-barlinechart
     * widget-piechart,widget-hollow-piechart,widget-funnel,widget-gauge, widget-china-map
     * **/

    analysisJsonFn() {
      const data = this.list
      for (let i = 0; i < data.length; i++) {
        console.log(data[i].type)
        switch (data[i].type) {
          case 'widget-text':
            this.analysisText(data[i].value)
            break
          case 'widget-marquee':
            this.analysisMarquee(data[i].value)
            break
          case 'widget-href':
            this.analysisHref(data[i].value)
            break
        }
      }
    },
    // 插入Dom节点
    appenchidDom(html) {
      const layout = document.getElementById('layout')
      layout.appendChild(html)
    },
    // 文本解析
    analysisText(data) {
      const position = data.position
      const setup = data.setup
      const styleObj = {
        position: 'absolute', // 默认定位方式
        height: position.height + 'px',
        left: position.left + 'px',
        top: position.top + 'px',
        width: position.width + 'px',
        'z-index': position.zIndex,
        background: setup.background,
        color: setup.color,
        'font-size': setup.fontSize + 'px',
        'font-weight': setup.fontWeight,
        'text-align': setup.textAlign,
      }
      const textName = setup.text
      const div = document.createElement('div')
      div.innerHTML = textName
      for (const key in styleObj) {
        div.style[key] = styleObj[key]
      }
      this.appenchidDom(div)
    },
    // 滚动文本
    analysisMarquee(data) {
      const position = data.position
      const setup = data.setup
      const marqueeSet = data.setup.marqueeSet
      const styleObj = {
        position: 'absolute', // 默认定位方式
        height: position.height + 'px',
        left: position.left + 'px',
        top: position.top + 'px',
        width: position.width + 'px',
        'z-index': position.zIndex,
        background: setup.background,
        color: setup.color,
        'font-size': setup.fontSize + 'px',
        'font-weight': setup.fontWeight,
        'text-align': setup.textAlign,
      }
      const textName = setup.text
      const marquee = document.createElement('marquee')
      marquee.innerHTML = textName
      for (const key in styleObj) {
        marquee.style[key] = styleObj[key]
      }

      this.appenchidDom(marquee)
    },
    // 超链接解析
    analysisHref(data) {},
  },
}
</script>

<style scoped lang="scss"></style>
